<template>
  <div class="commonEdit">
    <div class="main-label">
      <div style="display: inline-block">
        {{(btnType=='detail'?'查看':btnType=='edit'?'编辑':'新增')+props.label}}
      </div>
      <div style="display: inline-block;float: right;margin-right: 20px">
        <el-button class="head-btn" @click="handleSubmit()">{{btnType=='edit'?'编辑':'保存'}}</el-button>
        <el-button class="head-btn" @click="editBack">返回</el-button>
      </div>
    </div>
    <span class="info-label">基本信息</span>
    <el-form :model="submit" ref="form" size="small" label-width="140px"  status-icon inline-message>
      <el-row v-for="(row,rowIndex) of rowItems" :key="'row'+rowIndex">
        <el-col :span="12" :key="index"  v-for="(item,index) of row" style="display: flex; flex-direction: row; align-items: center; min-height: ">
          <el-form-item  :label="item.name" :prop="item.prop" :rules="(item.required || (item.isDisable == 1 && isHoliday) || (item.isDisable == 2 && isEvaluationBonus))?{ required: true, message: '请填写该字段', trigger: 'blur' }:null">
          <!-- <el-form-item  :label="item.name" :prop="item.prop" :rules="(item.required && (btnType == 'edit' || (btnType == 'add' && !item.disable)))?{ required: true, message: '请填写该字段', trigger: 'blur' }:null"> -->
            <el-select v-if="item.type=='select'" @change="(val)=>{isDisableNum(val,item.name)}" v-model="submit[item.prop]" placeholder="请选择" :disabled="item.disable">
              <el-option v-for="(opitem,opindex) of item.options" :label="opitem.label" :value="opitem[item.optionValue?item.optionValue:'value']" :key="rowIndex+'_'+index+'_'+opindex"></el-option>
            </el-select>
            <el-input v-if="item.type=='text' || item.type=='textarea'"  v-model="submit[item.prop]" :type="item.type" :disabled="item.disable" :readOnly="btnType=='detail'|| item.readOnly" :placeholder="item.placeholder" :class="{'grayBack':btnType=='detail'|| item.readOnly}"></el-input>
            <el-checkbox v-if="item.type == 'checkbox'" :true-label="item.trueLabel" :false-label="item.falseLabel" v-model="submit[item.prop]" :checked="submit[item.prop] == 'true' || submit[item.prop] == 1 || submit[item.prop] == true" :disabled="item.disable" name="type" :readOnly="btnType=='detail'"></el-checkbox>
            <el-date-picker
              type="date" v-if="item.type == 'date'"
              format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :disabled="(item.disable) || (item.isDisable == 1 && !isHoliday) || (item.isDisable == 2 && !isEvaluationBonus)"
              v-model="submit[item.prop]"
              placeholder="选择日期" ></el-date-picker>
            <el-input v-if="item.type == 'search'" :disabled="item.disable" :readonly="true" v-model="submit[item.proxy]">
              <el-button slot="append" icon="el-icon-search" @click="outSearch(rowIndex,index, item.name, item.disable)"></el-button>
            </el-input>
            <el-input v-if="item.type == 'search'" type="hidden" v-model="submit[item.prop]" style="display: unset"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <slot name="detailMore"></slot>

    <search-list-pop-up v-for="(item,index) of outSearchs" :key="'list-pop'+index" :props="item" @outClose="outClose" :isBounced="isBounced"></search-list-pop-up>
  </div>
</template>

<script>
  import SearchListPopUp from "./SearchListPopUp";
  export default {
      name:'commonEdit',
      props:{
          props:Object,
          addUrl:String,
          editUrl:String,
          editUrls:String,
          outBtn:Object,
          originalData:Object,
          isTrue: Boolean,
      },
      data() {
          return{
              submit:this.originalData,
              show:false,
              rules:this.props.rules,
              url:'',
              rowItems:[],
              btnType:'',
              outSearchs:[],
              isHoliday: false,
              isEvaluationBonus: false,
              isBounced: ''
          }
      },
      mounted() {
        // console.log(this.submit, this.originalData, 7890);
        this.isBounced = ''
      },
      methods:{
          handleSubmit() {
            console.log(this.submit, this.rowItems, 'edit');
            this.url = this.addUrl
            let arr = {...this.submit}
            if (this.btnType == 'add' && this.isTrue) {
                this.url = this.addUrl
            } else if (this.btnType == 'edit' && this.isTrue) {
                this.url = this.editUrl
                arr.fkChannel = arr.channelId
                arr.fkRegion = arr.regId
                arr.fkZone = arr.areaId
                arr.fkPosition = arr.attrId
                arr.salesman = arr.salesmanId
                arr.fkParent = arr.parentId
                if (arr.gender == '男') arr.gender = 1
                else arr.gender = 0
                if (arr.terminated == '离职') arr.terminated = 0
                else arr.terminated = 1
                arr.repType = arr.repTypeCode
                arr.repName = arr.repNameCn
                if (arr.repTypeCode == 1 || arr.repTypeCode == 2) {
                  this.url = this.editUrl
                } else {
                  this.url = this.editUrls
                  arr.salesman = arr.salesmanId
                }
            } else if (this.btnType == 'detail') {
                this.btnType = 'edit'
                return
            }
            console.log(arr, this.submit, 'arrrrrr');
              this.$refs.form.validate((valid) => {
                  if (valid) {
                      this.$http.post(this.url,this.$http.transferToNumber(Object.assign({}, arr))).then(resp=>{
                          this.$message.success("保存成功")
                          this.editBack()
                      },msg=>{})
                  } else {
                      this.$message.error('缺少字段')
                      return false;
                  }
              });

          },
          editBack() {
              this.$emit('editBack',null)
          },
          setRowItems() {
              this.rowItems = []
              for (let i=0;i<this.props.addItems.length;i++) {
                  if (i%2==0) {
                      if (i+1<this.props.addItems.length){
                          this.rowItems.push([this.props.addItems[i],this.props.addItems[i+1]])
                      } else {
                          this.rowItems.push([this.props.addItems[i]])
                      }
                  }
              }
              this.getOptions()
          },
          getOptions() {
              for (let i=0;i<this.rowItems.length;i++) {
                  for (let j=0;j<this.rowItems[i].length;j++) {
                      let temp = this.rowItems[i][j]
                      if (temp.type == 'select' && temp.optionsUrl) {
                          this.$http.get(temp.optionsUrl,{pageSize: temp.pagesize}).then(resp=>{
                                  if (resp instanceof Array) {
                                      temp.options = resp
                                  } else {
                                      temp.options = resp.list
                                  }
                                  for (let k=0;k<temp.options.length;k++) {
                                      temp.options[k].label = temp.options[k][temp.optionProxy]+(temp.optionAppendProxy?('['+temp.options[k][temp.optionAppendProxy]+']'):'')
                                  }
                                  this.$forceUpdate()
                          })
                      }
                  }
              }
          },
          setBtnType() {
              switch (this.outBtn) {
                  case this.$config.BTNS.ADD:
                      this.btnType = 'add'
                      break;
                  case this.$config.BTNS.EDIT:
                      this.btnType = 'edit'
                      break;
                  case this.$config.BTNS.DETAIL:
                      this.btnType = 'detail'
                      break;
              }
          },
          outClose() {
              this.outSearchs.splice(this.outSearchs.length-1,1)
              this.isBounced = ''
          },
          outSearch(rowIndex,index, name, val) {
            if (val){ // 禁用的搜索框不能搜索
              return
            }
            // console.log(this.rowItems, rowIndex, index);
              if (this.btnType == 'detail') {
                  return
              }
              this.outSearchs.push(this.rowItems[rowIndex][index])
              this.rowItems[rowIndex][index].callback=(item)=>{
                  console.log(item, '78',rowIndex, index, this.submit, this.outBtn.event)
                  this.$set(this.submit, this.rowItems[rowIndex][index].prop, item[this.rowItems[rowIndex][index].searchValue])
                  this.$set(this.submit, this.rowItems[rowIndex][index].proxy, item[this.rowItems[rowIndex][index].searchProxy])
                  // this.submit[this.rowItems[rowIndex][index].prop] = item[this.rowItems[rowIndex][index].searchValue]
                  // this.submit[this.rowItems[rowIndex][index].proxy] = item[this.rowItems[rowIndex][index].searchProxy]
                  if (this.outBtn.event == 'add()') {
                    if (name == '所属客户') {
                      this.submit.customerCode = item.customerCode
                      this.submit.customerType = item.customerType
                    } else if (name == '强生销售人员') {
                      this.submit.salesman = item.pkid
                    }
                  } else if (this.outBtn.event == 'edit()') {
                    if (name == '主管') {
                      this.submit.parentId = item.pkid
                      this.submit.parentName = item.repNameCn
                      this.submit.fkParent = item.repNameCn
                    } else if (name == '渠道') {
                      this.submit.channelId = item.pkid
                      this.submit.channelName = item.channelName
                      this.submit.fkChannel = item.channelName
                    } else if (name == '地区') {
                      this.submit.areaId = item.pkid
                      this.submit.fkZone = item.areaName
                    } else if (name == '大区') {
                      this.submit.regId = item.pkid
                      this.submit.regName = item.regName
                      this.submit.fkRegion = item.regName
                    } else if (name == '业务属性') {
                      this.submit.attrId = item.pkid
                      this.submit.attrName = item.attrName
                      this.submit.fkPosition = item.attrName
                    } else if (name == '所属客户') {
                      this.submit.customerCode = item.customerCode
                      this.submit.customerType = item.customerType
                      this.submit.customerName = item.customerName
                    } else if (name == '强生销售人员') {
                      this.submit.salesman = item.salesmanName
                      this.submit.salesmanId = item.salesman
                    }
                  }
              }
              if (name == '主管') this.isBounced = name
          },
          isDisableNum(val, name) {
            if (val == 1 && name == '长假标识') {
              this.isHoliday = true
            } else {
              this.isHoliday = false
            }
            if (val == 1 && name == '是否考核奖金') {
              this.isEvaluationBonus = true
            } else {
              this.isEvaluationBonus = false
            }
          },
          changeField() {
            this.submit.fkChannel = this.submit.channelName
            this.submit.fkZone = this.submit.areaName
            this.submit.fkRegion = this.submit.regName
            this.submit.fkParent = this.submit.parentName
            this.submit.salesman = this.submit.salesmanName
            if (this.submit.accountState == '启用') {
              this.submit.accountState = 1
            } else if (this.submit.accountState == '禁用') {
              this.submit.accountState = 0
            }
            if (this.submit.customerType == '客户集团') {
              this.submit.customerType = 1
            } else if (this.submit.customerType == '经销商') {
              this.submit.customerType = 2
            }
          }
      },
      created() {
          this.setRowItems()
          this.setBtnType()
          this.changeField()
      },
      watch:{
        props(newVal,oldVal) {
            this.setRowItems()
            this.$forceUpdate()
        }
      },
      components:{SearchListPopUp}
  }
</script>

<style lang="less" scoped>
  .main-label{
    border: #ccc 1px solid;
    border-bottom: 0;
    height: 36px;
    line-height: 35px;
    font-weight: bold;
    padding-left: 5px;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .grid-content {
    min-height: 36px;
  }
  .head-btn{
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    vertical-align: center;
    font: 8px/8px HelveticaNeue, Arial;
    padding: 0px 11px;
    border: 1px solid #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 9pt;
    margin-left: 2px;
    line-height: 25px;
    color: #000;
    outline: none;
    background-image: url(../../assets/img/datagrid_header_bg.gif);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
  &:hover {
     color: #FFF;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee', endColorstr='#2288cc');
     border: 1px solid #d51900;
     background: linear-gradient(top, #d51900, #d51900);
     background: -moz-linear-gradient(top, #d51900, #d51900);
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d51900), to(#d51900));
     text-shadow: -1px -1px 1px #1c6a9e;
   }
  /deep/span{
    display: block;
  }
  }

  /deep/.el-form-item__error {
    color: #F56C6C;
    font-size: 12px;
    line-height: 50px;
    position: absolute;
    padding: 0 5px !important;
    top: 0;
    left: 0;
  }
  /deep/.el-form-item {
    margin-bottom: 0px;
  }

  .el-row{
    display: flex;
    align-items: center;
    border: 1px solid #eee;
    .el-col:first-child{
      border-right: 1px solid #eee;
    }
    .grayBack{
      /deep/input,/deep/textarea{
        background: #f2f2f2;
      }
    }
  }

  /deep/.el-form-item__label {
    font-size: 12px;
  }
  /deep/.el-radio-button__inner {
    border-left: 1px solid #DCDFE6;
    font-weight: 600;
  }
  /deep/.el-input.is-disabled .el-input__inner {
    color: #606266;
  }
  /deep/.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom: 0! important;
    display: flex;
    width: 100%;
    padding: 5px;
  }
  /deep/.el-form-item--small .el-form-item__label {
    padding: 0;
    margin-right: 5px;
    background: #f1f1f1;
    border: 1px solid #e7e7e7;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /deep/.el-form-item--small .el-form-item__content {
    padding: 10px 10px;
    border: 1px solid #e7e7e7;
    align-items: center;
    height: 100%;
    flex-wrap: wrap;
    flex: 1;
    margin-left: 0px !important;
  }

  .info-label{
    padding: 10px 20px 10px 20px;
    display: inline-block;
    background-color: #d51900;
    margin-left: 5px;
    color: white;
    font-weight: bold;
  }
</style>
